<template>
  <div class="dispatch-detail">
    <div class="main" v-loading="loading">
      <div class="top">
        <el-row type="flex" align="center">
          <el-col :span="6">
            <div style="display: flex">
              <div class="icon">前</div>
              <div>
                <h3>
                  前纺<el-tag
                    size="mini"
                    class="table-tag"
                    style="margin-left: 15px"
                    >{{ search.bc }}</el-tag
                  >
                </h3>
                <div><span class="label">排班编号：</span></div>
              </div>
            </div>
          </el-col>
          <el-col :span="6"
            ><div class="mb10" style="margin-top: 3px">
              <span class="label">组织：</span>{{ search.org }}
            </div>
            <div><span class="label">车间：</span>{{ search.cj }}</div></el-col
          >
          <el-col :span="6"
            ><div class="mb10" style="margin-top: 3px">
              <span class="label">时间：</span>{{ date }}
            </div>
            <div><span class="label">工种：</span></div></el-col
          >
          <el-col :span="6"
            ><div class="mb10" style="margin-top: 3px">
              <span class="label">班长：</span>{{ basic.monitor }}
            </div>
            <div>
              <span class="label">班教：</span>{{ basic.classCoach }}
            </div></el-col
          >
          <div class="date">
            <h2>{{ day }}</h2>
            <p>{{ month }}</p>
            <el-date-picker
              class="virtual-datepicker"
              v-model="date"
              type="date"
              value-format="yyyy-MM-dd"
              :clearable="false"
              @change="changeDate"
            >
            </el-date-picker>
          </div>
        </el-row>
      </div>
      <el-row type="flex" justify="space-between" style="margin: 15px 0 10px">
        <div style="font-size: 16px; font-weight: 500; color: #48556a">
          班次人员
        </div>
        <div>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-circle-plus-outline"
            @click="addPerson"
            >添加人员</el-button
          >
          <el-button class="border-btn" size="small" @click="getYesterday"
            >复制昨日排班</el-button
          >
          <el-button
            v-if="false"
            class="border-btn"
            size="small"
            @click="$emit('copyTemplate', '前纺', date)"
            >复制到模板</el-button
          >
          <el-button
            class="danger-btn"
            type="danger"
            size="small"
            @click="$emit('delAll', '前纺', date)"
            >一键删除</el-button
          >
          <el-button size="small">导出排班表</el-button>
        </div>
      </el-row>
      <div class="common-table">
        <!-- 表头 -->
        <l-table
          type="表头"
          class="fixed-header"
          :columns="columns"
          :search="search"
          :wtOption="wtOption"
          :tableData="[]"
          :showHeader="true"
          :spanMethod="false"
        />
        <div style="width: fit-content; min-width: calc(100% - 8px)">
          <!-- 多个表格 -->
          <l-table
            type="前纺"
            :columns="columns"
            :date="date"
            :search="search"
            :wtOption="wtOption"
            :tableData="table"
            :showHeader="false"
          />
          <!-- 多个表格 -->
          <l-table
            type="前纺"
            :columns="columns"
            :date="date"
            :search="search"
            :wtOption="wtOption"
            :tableData="table3"
            :showHeader="false"
          />
          <!-- <l-table
            type="推粗纱"
            :wtOption="wtOption"
            :tableData="tcsTable"
            :showHeader="false"
            :spanMethod="true"
          ></l-table>
          <div class="middle-line">
            <el-row type="flex" align="middle">
              <span style="font-size: 15px">推粗纱（粗纱机台）：</span>
              <div>#1~#6、；</div>
              <div class="add-btn">+</div></el-row
            >
          </div> -->
        </div>
      </div>
      <l-dialog></l-dialog>
      <add-dialog
        ref="addDialog"
        :date="date"
        :query="search"
        @getData="getSchedule"
      ></add-dialog>
    </div>
  </div>
</template>
<script>
import moment from 'moment';
import addDialog from './add.vue';
import lTable from './table.vue';
import lDialog from './dialog.vue';
import { getSchedule, yesterdaySchedule, getMonitor } from '@/api/dispatch';
import axios from 'axios';
import { getSysDict } from '@/api/common.js';
export default {
  props: {
    // 搜索条件
    search: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  components: { addDialog, lTable, lDialog },
  computed: {
    loading() {
      return this.loadingCount !== 0;
    }
  },
  data() {
    return {
      basic: {},
      date: '',
      month: '',
      day: '',
      wtOption: [],
      table: [],
      table3: [],
      tcsTable: [],
      columns: [],
      loadingCount: 0
    };
  },
  created() {
    this.date = moment().format('YYYY-MM-DD');
    this.month = moment(this.date)
      .locale('zh-cn')
      .format('MMMM');
    this.day = moment(this.date).format('DD');
    this.getWorkOption();
  },
  methods: {
    async getSchedule() {
      this.loadingCount++;
      this.getMonitor();
      let params = {
        org: this.search.org,
        cj: this.search.cj,
        bc: this.search.bc,
        current_gongxu: '前纺',
        current_work_type: '挡车工',
        time: this.date
      };
      const res = await getSchedule(params);
      if (res.code == 1) {
        // 表头
        let columns = [];
        for (let i = 0; i < res.data2.length; i++) {
          let obj = {
            name: res.data2[i][Object.keys(res.data2[i])[0]],
            params: Object.keys(res.data2[i])[0],
            sjkt: res.data2[i].sjkt,
            jhkt: res.data2[i].jhkt,
            sykt: res.data2[i].sykt
          };
          columns.push(obj);
        }
        this.columns = columns;
        this.$nextTick(() => {
          // 数据
          let data = res.data;
          this.table = data;
          this.table3 = res.data3;
          this.loadingCount--;
        });
      }
    },
    async getMonitor() {
      let params = {
        org: this.search.org,
        cj: this.search.cj,
        bc: this.search.bc,
        gongxu: '前纺',
        time: this.date
      };
      const res = await getMonitor(params);
      if (res.code == 1) {
        this.basic = res.data || {};
      }
    },
    addPerson() {
      this.$refs.addDialog.show();
    },
    async getYesterday() {
      let params = {
        org: this.search.org,
        cj: this.search.cj,
        bc: this.search.bc,
        gongxu: '前纺',
        time: this.date
      };
      const res = await yesterdaySchedule(params);
      if (res.code == 1) {
        this.getSchedule();
      }
    },
    async getWorkOption() {
      var that = this;
      //  前纺
      let arr = [
        { name: '并条', val: 'bt', arr: [] },
        { name: '清花', val: 'qh', arr: [] },
        { name: '粗纱', val: 'cs', arr: [] },
        { name: '梳棉', val: 'sm', arr: [] }
      ];
      let requestArr = arr.map(item => {
        return getSysDict('workType_' + item.val);
      });
      axios.all(requestArr).then(
        axios.spread(function(res1, res2, res3, res4) {
          let resArr = [res1, res2, res3, res4];
          resArr.map((item, index) => {
            arr[index]['arr'] = item.data.dataList;
          });
          that.wtOption = arr;
          console.log(that.wtOption);
        })
      );
    },
    formatterArr(arr, group_key) {
      let map = {};
      let res = [];
      for (let i = 0; i < arr.length; i++) {
        let ai = arr[i];
        if (!map[ai[group_key]]) {
          map[ai[group_key]] = [ai];
        } else {
          map[ai[group_key]].push(ai);
        }
      }
      Object.keys(map).forEach(key => {
        res.push(map[key]);
      });
      return res;
    },
    changeDate(val) {
      this.month = moment(val)
        .locale('zh-cn')
        .format('MMMM');
      this.day = moment(val).format('DD');
      this.getSchedule();
    }
  }
};
</script>

<style lang="scss" scoped>
.common-table {
  overflow: auto;
  border-right: 1px solid #ebeef5;
}
</style>
